import React from 'react';
import styles from './index.module.scss';
import { inject, observer } from 'mobx-react';
import { View, Text,Swiper, SwiperItem, Image } from '@tarojs/components';
import { getCurrentInstance } from '@tarojs/taro';

@inject('user')
@observer
class UserCenterHeaderImage extends React.Component {
  constructor(props) {
    super(props);
    this.targetUserId = getCurrentInstance().router.params?.id;
  }
  
  render() {
    const userImageStyle = {}
    let backgroundUrl = this.props.user?.backgroundUrl;
    
    if (this.props.isOtherPerson) {
      backgroundUrl = this.props.user.targetUsers[this.targetUserId]?.backgroundUrl;
    }

    if (backgroundUrl) {
      Object.assign(userImageStyle, {
        backgroundImage: `url(${backgroundUrl})`
      })
    }

    return (
        
        <Swiper
                className="swiper-container"
                circular
                indicatorDots
                indicatorColor="#999"
                indicatorActiveColor="#bf708f"
                autoplay
            >
          <SwiperItem>
            <Image
                onClick={() => toHref('https://club.itianshu.cn/')}
                style={{ width: '100%', height: '100%' }}
                src="https://hmyimgs.oss-cn-beijing.aliyuncs.com/hmy/club/7.png"
                mode="aspectFill"
            ></Image>
            </SwiperItem>

            <SwiperItem>
            <Image
                onClick={() => toHref('https://www.itianshu.cn/')}
                style={{ width: '100%', height: '100%' }}
                src="https://hmyimgs.oss-cn-beijing.aliyuncs.com/hmy/club/8.png"
                mode="aspectFill"
            ></Image>
            </SwiperItem>
            <SwiperItem>
            <Image
                onClick={() => toHref('https://club.itianshu.cn/')}
                style={{ width: '100%', height: '100%' }}
                src="https://hmyimgs.oss-cn-beijing.aliyuncs.com/hmy/club/9.png"
                mode="aspectFill"
            ></Image>
            </SwiperItem>
          </Swiper>
    //   <View
    //     className={styles.box}
    //     style={userImageStyle}
    //     {...this.props}
    //   />
        
    );
  }
}

export default UserCenterHeaderImage;
